<template>
  <div class="list-page" style="padding:10px">
    <!-- 操作组 -->
    <div class="header-bar">
      <ButtonGroup class="float-left">
        <Button icon="h-icon-plus" @click="add">添加</Button>
        <Button :disabled="selects.length!=1" icon="h-icon-edit" @click="editFirst">修改</Button>
        <Poptip :isdisabled="selects.length==0" class="h-btn" content="确定删除所选记录？" @confirm="del">
          <Button icon="h-icon-trash">删除</Button>
        </Poptip>
        <Button icon="h-icon-refresh" @click="reload"></Button>
      </ButtonGroup>
    </div>
    <div v-show="showSearch" class="query-bar">
      <Form :model="table.params" class="title-suffix" ref="searchFrom" mode="adapt">
        <FormItem label="父级编码" prop="psn">
          <Select v-model="table.params.psn" uri="system/translate/branch" filterable></Select>
        </FormItem>
        <FormItem label="机构代码" prop="code">
          <input type="text" v-model="table.params.code"/>
        </FormItem>
        <FormItem label="名称" prop="name">
          <input type="text" v-model="table.params.name"/>
        </FormItem>
        <FormItem label="全称" prop="fullName">
          <input type="text" v-model="table.params.fullName"/>
        </FormItem>
        <FormItem label="类型" prop="type">
          <Select v-model="table.params.type" dict="BranchType" filterable></Select>
        </FormItem>
        <div class="flex-right">
          <Button class="h-btn" icon="icon-reload" @click="resetSerarch">重置</Button>
          <Button class="h-btn h-btn-primary" icon="h-icon-search" @click="search">确定</Button>
        </div>
      </Form>
    </div>
    <div class="list">
      <Table :datas="table.data" :loading="table.loading" @trdblclick="edit" @select="selected" checkbox>
        <TableItem title="序号" prop="$serial" :width="50"></TableItem>
        <!--<TableItem title="机构内部编码" prop="sn" ></TableItem>-->
        <!--<TableItem title="父级编码" prop="psn" ></TableItem>-->
        <TableItem title="名称" prop="name" treeOpener></TableItem>
        <TableItem title="全称" prop="fullName"></TableItem>
        <TableItem title="机构代码"  :width="100" prop="code"></TableItem>
        <TableItem title="内部编码" :width="120" prop="sn" ></TableItem>
        <TableItem title="类型" :width="120" prop="type" dict="BranchType"></TableItem>
<!--        <TableItem title="负责人" prop="leader"></TableItem>-->
<!--        <TableItem title="联系电话" prop="phone"></TableItem>-->
<!--        <TableItem title="电子邮箱" prop="email"></TableItem>-->
<!--        <TableItem title="传真" prop="fax"></TableItem>-->
<!--        <TableItem title="联系地址" prop="address"></TableItem>-->
<!--        <TableItem title="备注信息" prop="remark"></TableItem>-->
<!--        <TableItem title="邮政编码" prop="zipcode"></TableItem>-->
<!--        <TableItem title="加分" prop="jf"></TableItem>-->
      </Table>
    </div>
    <!--		<div class="bar">-->
    <!--			<Pagination v-model="table.pagination" align="right" @change="reload"></Pagination>-->
    <!--		</div>-->
    <BranchDialog ref="dlg" @change="reload">
    </BranchDialog>
  </div>
</template>
<script>
import {DataSource, ajax, util} from 'framework'
import BranchDialog from './branchDialog'

let table = new DataSource('branch/list_tree')

export default {
  name: "Branch",
  components: {BranchDialog},
  data() {
    return {
      showSearch: false,
      table: table,
      selects: []
    }
  }, mounted() {
    table.load()
  },
  methods: {
    reload() {
      this.selects = []
      table.load()
    },
    search() {
      this.selects = []
      // table.pagination.page=1;
      table.load()
    },
    rowSelect(v) {
      this.selectRow = util.fields(v, 'id')
    },
    selected(v) {
      this.selects = v.map(it => util.fields(it, 'id'))
    },
    resetSerarch() {
      table.params = {}
      this.reload()
    },
    add() {
      this.$refs.dlg.show()
    },
    editFirst() {
      if (this.selects.length == 0) {
        return;
      }
      this.edit(this.selects[0])
    },
    edit(v) {
      this.$refs.dlg.show(util.fields(v, 'id'))
    },
    del() {
      ajax.post('branch/delete', this.selects).then(r => {
        this.reload()
      })
    }
  }
}
</script>
